<template>
    <div>
        <section class="inner-page-banner" data-bg-image="media/banner/banner1.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumbs-area">
                            <h1>全部广告</h1>
                            <ul>
                                <li>
                                    <router-link to="/home">首页</router-link>
                                </li>
                                <li>全部广告</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=          Search Box Start         =-->
        <!--=====================================-->
        <section class="bg-accent">
            <div class="container">
                <div class="search-box-wrap-layout3">
                    <div class="search-box-layout1">
                        <form action="#">
                            <div class="row no-gutters">
                                <div class="col-lg-3 form-group">
                                    <div class="input-search-btn search-location" data-toggle="modal"
                                         data-target="#modal-location">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <label>Select Location</label>
                                    </div>
                                </div>
                                <div class="col-lg-3 form-group">
                                    <div class="input-search-btn search-category" data-toggle="modal"
                                         data-target="#modal-category">
                                        <i class="fas fa-tags"></i>
                                        <label>Select Category</label>
                                    </div>
                                </div>
                                <div class="col-lg-4 form-group">
                                    <div class="input-search-btn search-keyword">
                                        <i class="fas fa-text-width"></i>
                                        <input type="text" class="form-control" placeholder="Enter Keyword here ..."
                                               name="keyword">
                                    </div>
                                </div>
                                <div class="col-lg-2 form-group">
                                    <button type="submit" class="submit-btn"><i class="fas fa-search"></i>Search
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=          Product Start         =-->
        <!--=====================================-->
        <section class="product-inner-wrap-layout1 bg-accent">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-4 sidebar-break-md sidebar-widget-area" id="accordion">
                        <div class="widget-bottom-margin-md widget-accordian widget-filter">
                            <h3 class="widget-bg-title">筛选</h3>
                            <form action="#">
                                <div class="accordion-box">
                                    <!--来源-->
                                    <div class="card filter-type filter-item-list">
                                        <div class="card-header">
                                            <a class="parent-list" role="button" data-toggle="collapse"
                                               href="#collapseOne" aria-expanded="true">
                                                来源
                                            </a>
                                        </div>
                                        <div id="collapseOne" class="collapse show" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="filter-type-content">
                                                    <ul>
                                                        <li class="form-check"
                                                            v-for="(taskSource, index) in taskAccordion.taskSourceList">
                                                            <input class="form-check-input" type="radio"
                                                                   name="radioexample" :id="taskSource.id"
                                                                   :value="taskSource.name">
                                                            <label class="form-check-label"
                                                                   :for="taskSource.id">{{taskSource.name}}</label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--类别-->
                                    <div class="card filter-category multi-accordion filter-item-list">
                                        <div class="card-header">
                                            <a class="parent-list" role="button" data-toggle="collapse"
                                               href="#collapseTwo" aria-expanded="true">
                                                类别
                                            </a>
                                        </div>
                                        <div id="collapseTwo" class="collapse show" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="multi-accordion-content" id="accordion2">
                                                    <div class="card"
                                                         v-for="(taskCate, index) in taskAccordion.taskCategoryVos">
                                                        <div class="card-header">
                                                            <a class="parent-list collapsed" role="button"
                                                               data-toggle="collapse" :href="'#category'+index"
                                                               aria-expanded="false">
                                                                <img src="media/category/category5.png">
                                                                {{taskCate.name}}({{taskCate.taskCount}})
                                                            </a>
                                                        </div>
                                                        <div :id="'category'+index" class="collapse"
                                                             data-parent="#accordion2">
                                                            <div class="card-body">
                                                                <ul class="sub-list">
                                                                    <li v-for="(child, idx) in taskCate.child">
                                                                        <a href="#">{{child.name}}({{child.taskCount}})</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--价格筛选-->
                                    <div class="card filter-price-range filter-item-list">
                                        <div class="card-header">
                                            <a class="parent-list" role="button" data-toggle="collapse"
                                               href="#collapseFour" aria-expanded="true">
                                                价格筛选
                                            </a>
                                        </div>
                                        <div id="collapseFour" class="collapse show" data-parent="#accordion">
                                            <div class="card-body">
                                                <div class="price-range-content">
                                                    <div class="row">
                                                        <div class="col-lg-6 form-group">
                                                            <input type="number" name="filter-price-min"
                                                                   class="form-control" placeholder="￥">
                                                        </div>
                                                        <div class="col-lg-6 form-group">
                                                            <input type="number" name="filter-price-min"
                                                                   class="form-control" placeholder="￥">
                                                        </div>
                                                        <div class="col-12 form-group">
                                                            <button type="submit" class="filter-btn">确定
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <router-view/>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Modal Start           	 	=-->
        <!--=====================================-->
        <div class="modal fade modal-location" id="modal-location" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span class="fas fa-times" aria-hidden="true"></span>
                    </button>
                    <div class="location-list">
                        <h4 class="item-title">Location</h4>
                        <ul>
                            <li><a href="#">California</a></li>
                            <li><a href="#">Kansas</a></li>
                            <li><a href="#">Louisiana</a></li>
                            <li><a href="#">New Jersey</a></li>
                            <li><a href="#">New York</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal-location" id="modal-category" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span class="fas fa-times" aria-hidden="true"></span>
                    </button>
                    <div class="location-list">
                        <h4 class="item-title">Category</h4>
                        <ul>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category5.png"
                                                                         alt="icon"></span>Business &amp;
                                    Industry</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category7.png"
                                                                         alt="icon"></span>Cars &amp; Vehicles</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category14.png"
                                                                         alt="icon"></span>Electronics</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category4.png"
                                                                         alt="icon"></span>Health &amp; Beauty</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category18.png"
                                                                         alt="icon"></span>Hobby, Sport &amp;
                                    Kids</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category8.png"
                                                                         alt="icon"></span>Home Appliances</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category6.png"
                                                                         alt="icon"></span>Jobs</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category12.png"
                                                                         alt="icon"></span>Others</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category11.png"
                                                                         alt="icon"></span>Pets &amp; Animals</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category3.png"
                                                                         alt="icon"></span>Property</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category1.png"
                                                                         alt="icon"></span>Services</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'task',
        data() {
            return {
                taskAccordion: {
                    taskCategoryVos: null,
                    taskSourceList: null
                }
            }
        },
        mounted() {
            this.$store.dispatch('TaskAccordion').then(response => {
                this.taskAccordion = response.data
            })
        },
        methods: {
            tab(e){
                this.$router.push({name: 'task', params: {}})
            }
        }
    }
</script>
